<template>
    <div>
        <div class="quBox">
            <el-tooltip
                :content="item.huo"
                placement="top"
                v-for="(item, index) in leilist"
                :key="index"
            >
                <div class="xiao" style="">
                    <div class="picBox">
                        <img :src="item.img" class="pic" />
                    </div>
                    <div class="you">
                        <div class="txt">{{ item.txt }}</div>
                        <div class="text">￥{{ item.txta }}</div>
                    </div>
                </div>
            </el-tooltip>
            <div class="xiaBox">
                <div class="one">充值</div>
                <div class="two">提现</div>
            </div>
        </div>
        <div class="ping">
            <div class="maBox">
                <div class="about" id="main"></div>
            </div>
            <div class="maBox">
                <div class="about" id="maina"></div>
            </div>
        </div>
        <div class="box">
            <el-table :data="tableData" stripe border style="width: 100%">
                <el-table-column prop="date" label="日期" width="180">
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="180">
                </el-table-column>
                <el-table-column prop="address" label="地址"> </el-table-column>
                <el-table-column prop="ming" label="类别"> </el-table-column>
                <el-table-column prop="jine" label="金额"> </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
    data () {
        return {
            leilist: [
                {
                    img: require('../assets/images/q.png'),
                    txt: '海腾全部成员',
                    txta: '1020',
                    huo: '提示1'
                },
                {
                    img: require('../assets/images/qa.png'),
                    txt: '快网科技',
                    txta: '20',
                    huo: '提示2'
                },
                {
                    img: require('../assets/images/qb.png'),
                    txt: '海腾全部成员',
                    txta: '1020',
                    huo: '提示3'
                },
                {
                    img: require('../assets/images/qb.png'),
                    txt: '海腾全部成员',
                    txta: '1020',
                    huo: '提示4'
                }

            ],
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                ming: '小糊涂',
                jine: '一大笔'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄',
                ming: '小糊涂',
                jine: '一大笔'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄',
                ming: '小糊涂',
                jine: '一大笔'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄',
                ming: '小糊涂',
                jine: '一大笔'
            }]
        }
    },
    methods: {
        handleClick (row) {
            console.log(row)
        }
    },
    mounted () {
        const myChart = echarts.init(document.getElementById('main'))
        const myCharta = echarts.init(document.getElementById('maina'))
        window.onresize = function () {
            myChart.resize()
            myCharta.resize()
        }
        var option
        var optiona
        optiona = {
            title: {
                text: 'Referer of a Website',
                subtext: 'Fake Data',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 1048, name: 'Search Engine' },
                        { value: 735, name: 'Direct' },
                        { value: 580, name: 'Email' },
                        { value: 484, name: 'Union Ads' },
                        { value: 300, name: 'Video Ads' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]

        }
        optiona && myCharta.setOption(optiona)
        option = {
            title: {
                text: 'Stacked Line'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {
                        show: false
                    }
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: 'Email',
                    type: 'line',
                    stack: 'Total',
                    data: [10, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: 'Union Ads',
                    type: 'line',
                    stack: 'Total',
                    data: [20, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: 'Video Ads',
                    type: 'line',
                    stack: 'Total',
                    data: [10, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: 'Direct',
                    type: 'line',
                    stack: 'Total',
                    data: [0, 332, 301, 334, 390, 330, 320]
                },
                {
                    name: 'Search Engine',
                    type: 'line',
                    stack: 'Total',
                    data: [0, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        }

        option && myChart.setOption(option)
    }
}
</script>

<style lang="stylus">
.contont {
    background-color: #f5f5f5;
}

table {
    width: 100% !important;
}

.ping {
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: 15px;
    height: 400px;
    justify-content: space-between;
    margin-bottom: 15px;
}

.box {
    padding: 20px;
    border-radius: 10px;
    background-color: #ffffff;
}

.maBox {
    width: 47%;
    border-radius: 10px;
    padding: 20px;
    background-color: #ffffff;
}

#main {
    margin-right: 2%;
    height: 350px;
}

#maina {
    height: 350px;
    border-radius: 10px;
    background-color: #ffffff;
}

.quBox {
    border-radius: 10px;
    background-color: #ffffff;
    padding: 25px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .xiao:hover {
        background-color: #333333;
    }

    .xiao:hover .pic {
        transform: scale(1.1);
    }

    .xiao:hover .you .txt {
        color: #ffffff;
    }

    .xiao:hover .you .text {
        color: #ffffff;
    }

    .xiao:nth-child(1) {
        background-color: #28ACEF;
    }

    .xiao:nth-child(2) {
        background-color: #FC6D43;
    }

    .xiao:nth-child(3) {
        background-color: #1DDAB8;
    }

    .xiao:nth-child(4) {
        background-color: green;
    }

    .xiao {
        margin-right: 100px;
        width: 250px;
        height: 135px;
        background-color: #f5f5f5;
        text-align: center;
        border-radius: 5px;
        cursor: pointer;
        margin-bottom: 20px;

        .picBox {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            margin: 10px auto 0;
            align-items: center;
            justify-content: center;
            transition: all 0.5s;
            background-color: #ffffff;

            .pic {
                width: 30px;
                height: 30px;
            }
        }

        .you {
            text-align: center;

            .txt {
                font-size: 18px;
                color: #ffffff;
                padding-top: 10px;
            }

            .text {
                padding-top: 5px;
                font-size: 16px;
                color: #ffffff;
                font-weight: bold;
            }
        }
    }

    .xiaBox {
        width: 150px;
        margin: 10px 60px 20px 0;

        .one {
            width: 150px;
            height: 50px;
            background-color: #FF7E00;
            text-align: center;
            font-size: 18px;
            color: #ffffff;
            line-height: 50px;
            border: 1px solid #FF7E00;
            border-radius: 10px;
        }

        .two {
            width: 150px;
            height: 50px;
            text-align: center;
            font-size: 18px;
            color: #FF7E00;
            line-height: 50px;
            border: 1px solid #FF7E00;
            border-radius: 10px;
            margin-top: 15px;
        }
    }
}
</style>
